<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>角色列表</title>
  <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">

</head>
<body>
<!-- 内容主体区域 -->
<div style="padding: 30px;">
  <div class="layui-row layui-col-space15" >
    <div class="layui-panel" style="padding: 10px;height: 40px">
      <form action="/amin/role/getRoleList">
        <div class="layui-col-md3">
          <label class="layui-form-label">角色名称</label>
          <div class="layui-input-inline">
            <input type="text" name="roleName"  th:field="${sRole.roleName}"   id="roleName"  placeholder="请输入" autocomplete="off" class="layui-input layui-input-width">
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <input type="reset" class="layui-btn" value="重置">
          </div>
        </div>
      </form>
    </div>
  </div>
  <br>
  <div id="addButton" class="layui-col-md12" style="margin-top: 10px;">
    <button data-method="addData" class="layui-btn">添加</button>
  </div>
  <div class="layui-col-md12">
    <table class="layui-table" id="tebleList">
      <colgroup>
        <col width="100">
        <col width="100">
        <col width="150">
        <col width="100">
      </colgroup>
      <thead>
      <tr>
        <th>序号</th>
        <th>角色名称</th>
        <th>创建时间</th>
        <th>管理</th>
      </tr>
      </thead>
      <tbody th:each="role,roleStat:${roleList.list}">
      <tr>
        <td th:text="${roleStat.index+1}"></td>
        <td th:text="${role.roleName}"></td>
        <td th:text="${#dates.format(role.createdTime,'yyyy-MM-dd')}"></td>
        <td>
          <button  th:data-value="${role.id}"   data-method="editData" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
          <button  th:data-value="${role.id}"   data-method="delData" class="layui-btn layui-btn-sm layui-btn-normal layui-bg-red">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="layui-box layui-laypage layui-laypage-molv" id="page_up_next">
      <button type="button" th:data-value="${roleList.pageNum -1}" data-method="upPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">上一页</button>
      <button type="button" th:data-value="${roleList.pageNum +1}" data-method="nextPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">下一页</button>
    </div>
    &emsp;&emsp;总<span th:text="${roleList.total}"></span>条
  </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

<script>
  layui.use(function(){
    var layer = layui.layer
            ,form = layui.form;
    var href = "/amin/role/createRole";
    var pageUrl = '/amin/role/getRoleList?pageNum=';
    var id = 0;
    var pageNum = 1;
    var active = {
      addData: function(){
        var that = this;
        //多窗口模式，层叠置顶
        layer.open({
          type: 2 //此处以iframe举例
          ,title: '添加角色'
          ,area: ['100%', '100%']
          ,shade: 0
          ,maxmin: true
          ,offset: [ //为了演示，随机坐标
            0,0
          ]
          ,content: href
          ,zIndex: layer.zIndex //重点1
          ,success: function(layero, index){
            layer.addData(layero); //重点2. 保持选中窗口置顶

            //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
            layer.escIndex = layer.escIndex || [];
            layer.escIndex.unshift(index);
            //选中当前层时，将当前层索引放置在首位
            layero.on('mousedown', function(){
              var _index = layer.escIndex.indexOf(index);
              if(_index !== -1){
                layer.escIndex.splice(_index, 1); //删除原有索引
              }
              layer.escIndex.unshift(index); //将索引插入到数组首位
            });
          }
          ,end: function(){
            //更新索引
            if(typeof layer.escIndex === 'object'){
              layer.escIndex.splice(0, 1);
            }
          }
        });
      }
      ,editData: function(){
        var that = this;
        //多窗口模式，层叠置顶
        layer.open({
          type: 2 //此处以iframe举例
          ,title: '编辑字典'
          ,area: ['100%', '100%']
          ,shade: 0
          ,maxmin: true
          ,offset: [ //为了演示，随机坐标
            0,0
          ]
          ,content: href+"?id="+id
          ,zIndex: layer.zIndex //重点1
          ,success: function(layero, index){
            layer.editData(layero); //重点2. 保持选中窗口置顶
            //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
            layer.escIndex = layer.escIndex || [];
            layer.escIndex.unshift(index);
            //选中当前层时，将当前层索引放置在首位
            layero.on('mousedown', function(){
              var _index = layer.escIndex.indexOf(index);
              if(_index !== -1){
                layer.escIndex.splice(_index, 1); //删除原有索引
              }
              layer.escIndex.unshift(index); //将索引插入到数组首位
            });
          }
          ,end: function(){
            //更新索引
            if(typeof layer.escIndex === 'object'){
              layer.escIndex.splice(0, 1);
            }
          }
        });
      },delData: function(){
        var that = this;
        layer.confirm('确定要删除这条数据吗?', {icon: 3, title:'提示'}, function(index){
          window.location.href =window.document.location.origin+"/amin/role/delById?id="+id;
          layer.close(index);
        });
      },upPage: function(){
        if(null != $("#roleName").val()){
          pageNum =pageNum+"&roleName="+$("#roleName").val();
        }
        var that = this;
        window.location.href =window.document.location.origin+pageUrl+pageNum ;
      },nextPage: function(){
        if(null != $("#roleName").val()){
          pageNum = pageNum+"&roleName="+$("#roleName").val();
        }
        var that = this;
        window.location.href =window.document.location.origin+pageUrl+pageNum ;
      }
    };

    $('#addButton .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });
    $('#tebleList .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      id = othis.data('value');
      active[method] ? active[method].call(this, othis) : '';
    });
    $('#page_up_next .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      pageNum = othis.data('value');
      active[method] ? active[method].call(this, othis) : '';
    });
    //监听提交
    form.on('submit(formDemo)', function(data){
      return true;
    });
  });
</script>
</html>